<template>
    <div role="tabpanel" class="tab-panel" id="News">
        <ul class="list-group">
            <li class="list-group-item" v-for="news in newsList" :key="news.id">
                {{ news.content }}
                <button type="button" @click="clickHandler(news)" class="btn btn-primary" data-toggle="button"
                    aria-pressed="false" autocomplete="off">
                    {{ news.id }}
                </button>
            </li>
        </ul>
        <div class="alert alert-success" role="alert">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
export interface model {
    id: number,
    content: string
}

import { ref } from 'vue'
import { RouterView, useRouter } from 'vue-router' // 引入的是vuerouter提供的组件
const router = useRouter()
const clickHandler = (news: model) => {
    // router.push(`/home/news/newsdetail/${ news.id }?content=${ news.content }`)
    // 支持使用name跳转
    router.push({
        name: 'NewsDetail',
        params: {
            newsId: news.id,
        },
        query: {
            content: news.content
        }
    })
}

const newsList = ref<model[]>([
    { id: 11, content: '俄乌局势紧张' },
    { id: 22, content: '疫情不稳定' },
    { id: 33, content: '为爱冲锋的勇士' },
    { id: 44, content: '吴某某被判13年' },
    { id: 55, content: '李云迪嫖娼被抓' },
])

</script>

<style scoped>

</style>